
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solar System Animation</title>
<style>
  @keyframes orbit {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes self-rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .solar-system {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 150px auto;
  }

  .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    background-color: yellow;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .earth-orbit, .mars-orbit {
    position: absolute;
    top: 0;
    left: 0;
  }

  .earth-orbit {
    width: 100%;
    height: 100%;
    animation: orbit 10s linear infinite;
  }

  .mars-orbit {
    width: 100%;
    height: 100%;
    animation: orbit 15s linear infinite; /* Mars orbits slower */
  }

  .earth, .mars {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 20px;
    height: 20px;
    background-color: blue;
    border-radius: 50%;
  }

  .earth {
    transform-origin: 50% 250px;
    animation: self-rotate 2s linear infinite, orbit 10s linear infinite;
  }

  .mars {
    transform-origin: 50% 300px;
    animation: self-rotate 2.4s linear infinite, orbit 15s linear infinite; /* Mars has a slightly longer rotation */
    background-color: red;
  }
</style>
</head>
<body>
<div class="solar-system">
  <div class="sun"></div>
  <div class="earth-orbit">
    <div class="earth"></div>
  </div>
  <div class="mars-orbit">
    <div class="mars"></div>
  </div>
</div>
<!-- Code injected by live-server -->
<script>
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var parent = elem.parentElement || head;
					parent.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					parent.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
</script>
</body>
</html>